<template>
    <div>
        <el-input placeholder="请输入内容" v-model="fileUrl" class="input-with-select">
            <div slot="append">
                <el-upload :action="docLoadPath" :show-file-list="false" :on-error="handleError"
                    :on-success="handleBeforeUpload1" :before-upload="beforeUpload"
                    :headers="{ 'unitop-admin-token': token}">
                    <el-button type="primary" :loading="loading">加载中</el-button>
                </el-upload>
            </div>
        </el-input>
    </div>
</template>

<script>
export default {
    name: 'fileUpLoad',
    props: {
        uplaodPath:{
            type:String,
            default:''
        },
        fileUrl:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            loading: false,
            docLoadPath: '',
        };
    },
    watch: {
        uplaodPath: function (val, oldVal) {
            if (val != oldVal && val) {
                this.docLoadPath = this.$API.ASSET_IMAGES_URL+val;
            }
        }
    },
    created() {
        if (this.uplaodPath) {
            this.docLoadPath = this.$API.ASSET_IMAGES_URL+this.uplaodPath;
        }
    },
    methods: {
        //身份证正面上传成功
        handleBeforeUpload1(response) {
            this.loading = false;
            if (response.code == 0) {
                console.log('response', response);
                this.fileUrl = response.data.url || response.data;
                this.$emit('update:fileUrl', this.fileUrl);
                this.$message.success('上传成功');
            } else {
                this.$message.error(response.msg);
            }
        },
        beforeUpload: function (file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['docx', 'doc', 'pdf','xlsx','xls'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传docx,doc,pdf,xlsx,xls格式文件！'
                });
                return false;
            }
            this.loading = true;
        },
        handleError() {
            this.loading = false;
            this.$message.error('上传失败');
        },
    }
};
</script>

<style scoped>
.input-with-select {
   
}
</style>
